* {
  margin: 0;
  padding: 0;
}

.tg {
  width: 3vh;
  display: flex;
  align-items: center;
  justify-content: end;
  margin-left: 92%;
  margin-top: 0vh;
  transform: translateY(2vh);
}

.kb {
  display: flex;
  align-items: center;
  border-radius: 50%;
  width: 100%;
  height: 60px;
  width: 70px;
}

.ge {
  display: flex;
}

.foo {
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 0;
  height: 10vh;
  background-color: white;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
}

.child-img {
  width: 30%;
  transform: translateY(1.5vh);
}

.foo-child {
  width: 25%;
  height: 100%;
}

.foo p {
  transform: translateY(30%);
}

body {
  background-color: #f8f8f8;
}

.head {
  background-image: url("../assets/img17517918accc71228.png");
  background-size: 100%;
  white-space: nowrap;
  background-repeat: no-repeat;
  height: 18vh;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.ge {
  display: flex;
  align-items: center;
  width: 52%;
  justify-content: space-evenly;
}

.yu {
  width: 94%;
  height: 11vh;
  background-color: white;
  display: flex;
  position: relative;
  z-index: 8888;
  border-radius: 10px;
  margin-left: 3%;
  margin-top: -17px;
  justify-content: space-around;
  align-items: center;
}

.to {
  background-color: white;
  margin-top: 2%;
  border-radius: 20px;
  width: 96%;
  margin-left: 2%;
  height: 16vh;
}
.toTo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin-left: 5%;
  transform: translateY(1vh);
}
.hj {
  display: flex;
  margin-top: -6%;
  margin-left: 8%;
}

.child-left {
  display: flex;
  color: red;
}
.toCen {
  display: flex;
  margin-top: 3vh;
}
.toChild {
  text-align: center;
}
.das {
  background-color: white;
  margin-top: 2%;
  border-radius: 20px;
  width: 96%;
  margin-left: 2%;
  height: 16vh;
}
.daCen {
  display: flex;
  margin-top: 3vh;
  width: 96%;
  margin-left: 2%;
}
.daChild {
  text-align: center;
  width: 25%;
}
.daHead {
  transform: translate(2vh, 1vh);
}
.gxx {
  height: 4vh;
  background-color: #d5a265;
  color: white;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 9px;
  padding-right: 6px;
  padding-left: 6px;
}
.shop {
  width: 90%;
  min-height: 40vh;
  margin-left: 4.5%;
  display: flex;
  margin-top: 1.5vh;
  padding-bottom: 10%;
}

.shop-left {
  width: 55%;
}
.dat {
  width: 50%;
  background-color: #e0af75;
  margin-left: 25%;
  position: fixed;
  top: 40%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8vh;
  display: none;
}
.shop {
  width: 90%;
  min-height: 40vh;
  margin-left: 4.5%;
  display: flex;
  margin-top: 1.5vh;
}

.left-img {
  width: 90%;
  height: 25vh;
  margin-left: 5%;
}

.child-left {
  display: flex;
  color: red;
}

.shop-right {
  width: 55%;
  margin-left: -2%;
}

.tt {
  width: 90%;
  margin-left: 5%;
}

.left-child {
  width: 90%;
  margin-left: 5%;
  margin-top: 5%;
  background-color: white;
}

.right-child {
  width: 90%;
  margin-left: 5%;
  margin-top: 5%;
  background-color: white;
}
.imgLeft {
  width: 4vh;
}
.coImg {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5%;
}
.imgRight {
  width: 4vh;
}
.co-co {
  background-color: blueviolet;
  margin-top: 5%;
  width: 100%;
  height: 40vh;
}
.childImg {
  width: 30%;
  transform: translateY(1.5vh);
}

.rt {
  width: 90%;
  margin-left: 5%;
}

.leftImg {
  width: 90%;
  height: 25vh;
  margin-left: 5%;
}
.ty {
  display: block;
  background-color: #e0af75;
  width: 3vh;
  border-radius: 90px;
  margin-left: 30%;
  height: 3vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.leftImg {
  width: 30px;
  height: 30px;
}

.rightImg {
  width: 20px;
  height: 20px;
}

.center {
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll {
  width: 100%;
  height: auto;
  background-color: #f8f8f8 !important;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 10px;
  column-count: 2;
  page-break-inside: avoid;
  break-inside: avoid;
  column-gap: 1px;
  padding-top: 10px;
  padding-bottom: 10vh;
}

.scrollChild {
  width: 40%;
  background-color: white;
  height: auto;
  padding-top: 10px;
  padding-left: 2%;
  padding-right: 2%;
  margin-top: 10px;
  height: max-content;
  border-radius: 10px;
  padding-bottom: 10px;
}

.scrollChild img {
  width: 100%;
  height: auto;
}

.add {
  width: 20px;
  height: 20px;
  color: white;
  border-radius: 20px;
  border: 1px solid white;
  background-color: #e0af75;
  text-align: center;
}

.constadd {
  color: red;
  margin-top: 6px;
  margin-left: 3px;
  padding-top: 10px;
  width: 90%;
  display: flex;
  justify-content: space-between;
}

.controls {
  display: flex;
  align-items: center;
  width: 50%;
  height: 100%;
  justify-content: space-around;
}

.redButton {
  width: 50%;
  background-color: red;
  height: 80%;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: white;
}
.footer {
  position: fixed;
  bottom: 0;
}
.footerchild {
  width: 25%;
}
